<template>
  <div class="wrap">
    <TabBar />
    <up-sticky>
      <div style="background: #f2f2f7;padding-top: 24rpx">
        <div class="flex_sb_cen">
          <div class="nav_bar" @tap="Router.push('activityScheduleList')">
            <Image height="120" name="activitySchedule/activity_schedule_navbar" oss type="png" width="338" />
          </div>
          <div class="nav_bar" @tap="Router.push('marketCenterDatabase')">
            <Image height="120" name="activitySchedule/market_database_navbar" oss type="png" width="338" />
          </div>
        </div>
      </div>
    </up-sticky>
    <div class="title mt28">近期日程</div>
    <template v-if="recentSchedulelist.length > 0">
      <div v-for="item in recentSchedulelist" :key="item.id" class="schedule_list mt16 mb24" @tap="Router.push('schedule_details', {id: item.id})">
        <div class="flex_sb_start">
          <div class="schedule_title generate-columns">{{ item.name }}</div>
          <span :style="{color: statusAbout(item.status)?.color}" class="schedule_status">{{ statusAbout(item.status)?.text }}</span>
        </div>
        <div class="schedule_text mt24">
          <Icon name="icon-shijian1" size="22" />
          <span class="ml10">{{ item.beginTimeText }} - {{ item.endTimeText }}</span>
        </div>
        <div class="schedule_text mt16">
          <Icon name="icon-dingwei1" size="24" />
          <span class="ml10">{{ item.province }}-{{ item.city }}</span>
        </div>
      </div>
      <div class="flex_cen_cen">
        <Button size="N" type="solid" @confirm="Router.push('activityScheduleList')">查看更多</Button>
      </div>
    </template>
    <template v-else>
      <div class="flex_cen_cen no_data_tip">近期没有日程安排哦~</div>
    </template>
    <div class="title mt28">近期更新</div>
    <template v-if="recentMeterialList.length > 0">
      <div v-for="item in recentMeterialList" :key="item.materialId" class="meterial_list mt16 mb24" @tap="navigatoFn(item)">
        <div class="item_one">
          <div class="flex_sb_start">
            <div class="item_text">{{ item.title }}</div>
            <Icon v-if="item.typeId === 8" :name="iconName(item.content)" size="120" />
            <Image v-else :name="item.cover" :overspread="true" size="120" />
          </div>
          <div class="item_time mt16">发布于{{ item.publishTime }}</div>
        </div>
        <div class="item_two flex_sb_cen">
          <div class="flex_sb_cen">
            <Icon :styles="{marginRight: '8rpx'}" name="icon-reading" size="30" />
            <span>{{ item.totalReadingCount }}</span>
          </div>
          <div class="flex_sb_cen">
            <Icon :styles="{marginRight: '8rpx'}" name="icon-like" size="28" />
            <span>{{ item.totalLikingCount }}</span>
          </div>
          <div class="flex_sb_cen">
            <Icon :styles="{marginRight: '8rpx'}" name="icon-fenxiang1" size="26" />
            <span>{{ item.totalTransferringCount }}</span>
          </div>
          <div class="flex_sb_cen" @tap.stop="jumpToPageFn(item)">
            <Icon :styles="{marginRight: '8rpx'}" name="icon-biaodan" size="26" />
            <span style="color: #1890ff;">{{ item.formCount }}</span>
          </div>
        </div>
      </div>
      <div class="flex_cen_cen">
        <Button size="N" type="solid" @confirm="Router.push('marketCenterDatabase')">查看更多</Button>
      </div>
    </template>
    <template v-else>
      <div class="flex_cen_cen no_data_tip">近期没有更新哦~</div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import Icon from '@C/Icon.vue'
import { computed, ref } from 'vue'
import { Router, onShow, storeCommit } from '@U/common'
import { getChannelAgentInfo } from '@P/User/request'
import Image from '@C/Image.vue'
import { getIndexActivityScheduleList, getMainMeterialList } from '@P/marketCenter/request'
import dayjs from 'dayjs'
import Button from '@C/Button.vue'

const statusAbout = computed(() => (status: number) => {
  let obj = {}
  if (status === 0) obj = { text: '待开始', color: '#8183FA' }
  if (status === 1) obj = { text: '进行中', color: '#1890FF' }
  if (status === 2) obj = { text: '待上传', color: '#FF8002' }
  if (status === 3) obj = { text: '已完成', color: '#2DC76D' }
  if (status === 4) obj = { text: '已结束', color: '#2DC76D' }
  return obj
})
const iconName = computed(() => (docUrl: string) => {
  let temp = ''
  switch (docUrl.split('.')[1]) {
    case 'pdf': temp = 'icon-pdf-2'; break
    case 'doc':
    case 'docx': temp = 'icon-word-2'; break
    case 'xls':
    case 'xlsx': temp = 'icon-excel-2'; break
    case 'ppt':
    case 'pptx': temp = 'icon-ppt-2'; break
  }
  return temp
})
const navigatoFn = (item: object) => {
  if (item.typeId === 1 || item.typeId === 2) return Router.push('articleInfo', { materialId: item.materialId, pageTitle: item.typeId === 1 ? '彩页' : '软文' })
  if (item.typeId === 8) return Router.push('gl_market_details', { materialId: item.materialId, pageTitle: '文档' })
}
const jumpToPageFn = (item: object) => {
  if (item.formCount === 0) return
  Router.push('gl_market_form', { materialId: item.materialId })
}
// 近期日程
const recentSchedulelist = ref([])
const getActivityScheduleListFn = async () => {
  const params = {
    pageSize: 6,
    pageNumber: 1,
    status: '',
    isCreater: '',
    currentEvent: dayjs(new Date()).format('YYYY-MM-DD'),
  }
  const res = await getIndexActivityScheduleList(params).finally(() => {})
  if (res?.code === 200) recentSchedulelist.value = res.data.rows?.filter((item: object, index: number) => index < 2)
}
// 近期更新
const recentMeterialList = ref([])
const getMainMeterialListFn = async () => {
  const params = {
    'typeIdList[0]': '1',
    'typeIdList[1]': '2',
    'typeIdList[2]': '8',
    pageSize: 6,
    pageNumber: 1,
  }
  const res = await getMainMeterialList(params).finally(() => {})
  if (res?.code === 200) recentMeterialList.value = res.data.rows?.filter((item: object, index: number) => index < 2)
}
// 获取智客个人信息
const getChannelAgentInfoFn = async () => {
  const res = await getChannelAgentInfo().finally(() => {})
  if (res?.code === 200) {
    // 数组为空时当做服务商处理
    if (res.data?.typeAndSuperior.length < 1) storeCommit('zhiKeGrade', 'serviceProvider')
    else {
      const isServiceProvider = res.data?.typeAndSuperior.some(item => item.category === 1) // 0 合作商；1 服务商
      if (isServiceProvider) storeCommit('zhiKeGrade', 'serviceProvider')
      else storeCommit('zhiKeGrade', 'coopProvider')
    }
  }
}
onShow(() => {
  getChannelAgentInfoFn()
  getActivityScheduleListFn()
  getMainMeterialListFn()
})
</script>
<style lang="less" scoped>
.wrap {
  padding: 0 26rpx 160rpx 24rpx;
    .title {
      font-weight: 700;
      color: #606266;
    }
  .nav_bar {
    width: 338rpx;
    height: 120rpx;
  }
  .schedule_list {
    border-radius: 24rpx;
    padding: 16rpx 20rpx 20rpx;
    background-color: #fff;
    .schedule_title {
      width: 520rpx;
      font-weight: 400;
      font-size: 32rpx;
      color: #262626;
      line-height: 44rpx;
    }
    .schedule_text {
      font-weight: 400;
      font-size: 28rpx;
      color: #8C8C8C;
      line-height: 40rpx;
    }
    .schedule_status {
      font-weight: 500;
      font-size: 28rpx;
      line-height: 40rpx;
    }
  }
  .meterial_list {
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 26rpx 28rpx 16rpx;
    .item_one {
      padding: 0 0 18rpx 14rpx;
      border-bottom: 2rpx solid #E5E5E5;
      .item_text {
        width: 494rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(0,0,0,0.85);
        line-height: 40rpx;
      }
      .item_img {
        width: 120rpx;
        height: 120rpx;
        background-color: #ccc;
      }
      .item_time {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(0,0,0,0.25);
        line-height: 34rpx;
      }
    }
    .item_two {
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(0,0,0,0.45);
      line-height: 34rpx;
      padding: 14rpx 0 0 14rpx;
    }
  }
  .no_data_tip {
    color: rgba(0, 0, 0, 0.45);
    line-height: 36rpx;
    text-align: center;
    margin-top: 60rpx;
  }
}
</style>
